<template>
    <view class="globe_back">
        <view class="evaluate">
            <view class="evaluateList" v-for="item in list">
                <view class="flex">
                    <view>
                        <image class="userImg" :src="item.userImg" mode="widthFix"></image>
                    </view>
                    <view>
                        <text class="title">{{ item.name }}</text>
                        <text class="time">{{ item.time }}</text>
                        <u-rate :count="count" v-model="item.value" active-color="#FF6401" inactiveColor="#F7F7F7" size="16"></u-rate>
                    </view>
                </view>
                <view class="evatext">{{ item.text }}</view>
                <view>
                    <image v-for="img in item.images" class="evaluateImg" :src="img" mode="widthFix"></image>
                </view>
            </view>
        </view>
        <view style="height: 20px"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            count: 5,
            list: []
        };
    },
    onLoad() {
        this.getList();
    },
    methods: {
        getList() {
            this.list = [
                {
                    userImg: '@/static/imgs/cqt.png',
                    value: 4.5,
                    name: '匿名用户',
                    time: '24小时',
                    text: '服务很好',
                    images: ['@/static/imgs/cqt.png', '@/static/imgs/cqt.png']
                },
                {
                    userImg: '@/static/imgs/cqt.png',
                    value: 3,
                    name: '匿名用户',
                    time: '2天前',
                    text: '服务很好',
                    images: []
                }
            ];
        }
    }
};
</script>

<style scoped lang="scss">
.evaluate {
    padding: 32rpx;
}
.evaluateList {
    background: white;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
}
.userImg {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
}
.title {
    margin: 0 8rpx;
    color: #00091a;
    font-size: 28rpx;
}
.time {
    color: #ccced1;
    font-size: 24rpx;
}
.evatext {
    font-size: 28rpx;
    color: #00091a;
    margin: 16rpx 0;
}
.evaluateImg {
    width: 196rpx;
    height: 196rpx;
    border-radius: 16rpx;
    margin: 9rpx;
}
</style>
